<template>
  <v-container>
    <v-card max-height="630">
      <v-tabs vertical>
        <v-tab>
          推荐
        </v-tab>

        <v-tab v-for="topCategory in goodsCategoryList" :key="topCategory.id">
          {{topCategory.name}}
        </v-tab>

        <v-tab-item>
          <v-row no-gutters>
            <v-col cols="9">
              <v-carousel
                  cycle
                  height="630"
                  hide-delimiter-background
                  show-arrows-on-hover
              >
                <v-carousel-item
                    v-for="(slide, i) in slides"
                    :key="i"
                >
                  <v-sheet
                      :color="colors[i]"
                      height="100%"
                  >
                    <v-row
                        class="fill-height"
                        align="center"
                        justify="center"
                    >
                      <div class="text-h2">
                        {{ slide }} Slide
                      </div>
                    </v-row>
                  </v-sheet>
                </v-carousel-item>
              </v-carousel>
            </v-col>
            <v-col cols="3">
              <v-list>
                <v-list-item class="px-2">
                  <v-list-item-avatar>
                    <v-img src="http://39.103.187.89/images/msg.png"></v-img>
                  </v-list-item-avatar>
                  <v-list-item-subtitle>万能的魔术菇</v-list-item-subtitle>
                </v-list-item>
                <v-list-item>
                  <v-btn  color="red" class="rounded-xl" style="color: white">新人福利</v-btn>
                  <v-btn  color="black" class="rounded-xl" style="color: #dbce8b">PLUS会员</v-btn>
                </v-list-item>
              </v-list>
              <v-divider></v-divider>
              <v-list>
                <v-list-item dense>
                  <v-list-item-title>公告：</v-list-item-title>
                  <v-list-item-action><v-btn text>更多</v-btn></v-list-item-action>
                </v-list-item>
                <v-list-item dense>
                  <v-list-item-icon class="caption mr-3" style="background-color: #fdeeed;color: red">热门</v-list-item-icon>
                  <v-list-item-content class="caption">好好学习，天天向上！！</v-list-item-content>
                </v-list-item>
                <v-list-item dense>
                  <v-list-item-icon class="caption mr-3" style="background-color: #fdeeed;color: red">热门</v-list-item-icon>
                  <v-list-item-content class="caption">这是一个好看的公告栏！！</v-list-item-content>
                </v-list-item>
                <v-list-item dense>
                  <v-list-item-icon class="caption mr-3" style="background-color: #fdeeed;color: red">热门</v-list-item-icon>
                  <v-list-item-content class="caption">请不要点击查看，因为里面啥都没有！！</v-list-item-content>
                </v-list-item>
                <v-list-item dense>
                  <v-list-item-icon class="caption mr-3" style="background-color: #fdeeed;color: red">热门</v-list-item-icon>
                  <v-list-item-content class="caption">我是一条公告！！</v-list-item-content>
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>
        </v-tab-item>
        <v-tab-item v-for="topCategory in goodsCategoryList" :key="topCategory.id" class="pa-5" style="max-height: 500px">
          <v-row no-gutters>
            <v-col cols="9" >
              <div style="overflow: auto;height: 630px" >
                <v-row v-for="secondCategory in topCategory.subCategoryList" :key="secondCategory.id">
                  <v-list-item three-line>
                    <v-list-item-content>
                      <v-list-item-title class="my-2"><strong>{{secondCategory.name}}</strong></v-list-item-title>
                      <div>
                        <v-chip
                            label
                            class="ma-1 category_span"
                            v-for="threeCategory in secondCategory.subCategoryList" :key="threeCategory.id"
                            @click="categoryHandle(threeCategory.id)"
                        >
                          {{threeCategory.name}}
                        </v-chip>
                      </div>
                    </v-list-item-content>
                  </v-list-item>
                </v-row>
              </div>
            </v-col>
            <v-col cols="3">
              <v-container>这是广告栏！！</v-container>
            </v-col>
          </v-row>
        </v-tab-item>
      </v-tabs>
    </v-card>
    <br/>
    <v-card flat width="100%" height="280" class="rounded-0">
      <v-row no-gutters>
        <v-col cols="2">
          <div style="width: 100%;height: 100%;background-color: #c2185b" class="text-h3">秒杀专场</div>
        </v-col>
        <v-col cols="8">
          <v-sheet
              class="mx-auto"
              elevation="0"
              max-width="800"
          >
            <v-slide-group
                class="pa-4"
                show-arrows
            >
              <v-slide-item
                  v-for="n in 15"
                  :key="n"
                  v-slot="{ active, toggle }"
              >
                <v-card
                    class="ma-2"
                    height="230"
                    width="150"
                    @click="toggle"
                >
                  <v-card-text class="pa-2">
                    <v-img src="../../assets/goods2.webp" contain width="130"/>
                  </v-card-text>
                  <v-card-subtitle style="max-width: 150px;" class="text-truncate py-1">
                    菲内克斯耐热玻璃水晶煲钢化玻璃锅带盖汤煲 汤锅 微波炉烤箱专用
                  </v-card-subtitle>
                  <v-card-actions>
                    <v-btn color="red" class="white--text" flat>￥99.9</v-btn>
                    <v-btn text class="text-decoration-line-through">￥299.999</v-btn>
                  </v-card-actions>
                </v-card>
              </v-slide-item>
            </v-slide-group>
          </v-sheet>
        </v-col>
        <v-col cols="2">
          <div style="width: 100%;height: 100%;background-color: #ef5350" class="text-h3">我是广告栏</div>
        </v-col>
      </v-row>
    </v-card>
    <br/>
    <v-card flat width="100%" class="rounded-0" color="#e0e0e0">
      <v-row>
        <v-col cols="4" class="pa-0 justify-center text-center">
          <v-img src="../../assets/home1.jpg" contain width="380" class="rounded-xl"/>
        </v-col>
        <v-col cols="4" class="pa-0">
          <v-img src="../../assets/home2.jpg" contain width="380" class="rounded-xl"/>
        </v-col>
        <v-col cols="4" class="pa-0">
          <v-img src="../../assets/home3.jpg" contain width="380" class="rounded-xl"/>
        </v-col>
      </v-row>
    </v-card>
    <br/>
    <v-card flat width="100%"  class="rounded-0">
      <div style="background-color: #e0e0e0" class="text-h5">&nbsp;猜你喜欢</div>
      <div class="goods_div" v-for="i in 25" :key="i">
        <v-card width="100%" height="100%" class="rounded-0" flat>
          <v-card-text>
            <v-img src="../../assets/goods.webp" contain width="220"/>
          </v-card-text>
          <v-card-subtitle style="max-width: 220px" class="subtitle-2 py-1 name_p">
            菲内克斯耐热玻璃水晶煲钢化玻璃锅带盖汤煲 汤锅 微波炉烤箱专用
          </v-card-subtitle>
          <v-card-subtitle style="max-width: 220px" class="text-no-wrap subtitle-1 py-0">
            <span style="color: red" class="text-h6">￥29.99&nbsp;&nbsp;</span>7人购买
          </v-card-subtitle>
        </v-card>
      </div>
    </v-card>
  </v-container>
</template>

<script>
import {request} from "@/network/request";

export default {
  name: "Home",
  data:()=>({
    colors: [
      'indigo',
      'warning',
      'pink darken-2',
      'red lighten-1',
      'deep-purple accent-4',
    ],
    slides: [
      'First',
      'Second',
      'Third',
      'Fourth',
      'Fifth',
    ],
    icons: [
      'mdi-facebook',
      'mdi-twitter',
      'mdi-linkedin',
      'mdi-instagram',
    ],
    goodsCategoryList:[],
  }),
  created() {
    this.listGoodsCategory()
  },
  methods:{
    listGoodsCategory(){
      request({
        url:'/api/goods/category',
        method: 'GET'
      }).then(resp=>{
        console.log(resp.data)
        this.goodsCategoryList=resp.data.data
      }).catch(err=>{
        console.log(err.data)
      })
    },
    categoryHandle(goodsCategoryId){
      this.$router.push({
        path:'goodsList',
        query:{
          goodsCategoryId
        }
      })
    },
  }
}
</script>

<style scoped>
.goods_div{
  width: 20%;
  height: 325px;
  float: left;
  padding: 5px;
}
.name_p{
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.category_span{
  padding-left:  20px;
  padding-right:  20px;
}
</style>
